// useState
import { useState, useEffect } from 'react'

// useEffect return 组件销毁时执行
function Test () {
  useEffect(() => {
    let timer = setInterval(() => {
      console.log('定时器执行一次')
    }, 2000)

    return () => {
      console.log('销毁定时器')
      clearInterval(timer)
    }
  })

  return (
    <div>这是 Test 组件</div>
  )
}

function useData () {
  // 定义
  const [count, setCount] = useState(0)
  // 副作用函数，初始化时会执行一次，之后每次useState项变更都会执行
  useEffect(() => {
    document.title = count
  }, [count])
  // 传入数组，会在数组传入项发生变化时执行 (传入空数组在初始化执行一次)


  const [flag, setFlag] = useState(true)
  return (
    <div>
      {flag ? <Test /> : ''}
      <button onClick={() => setFlag(!flag)}>显示/隐藏</button>
      <br />
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

export default useData